<template>
  <div class="page-card">
    <WmcCard :title="title">
      <WmcForm v-bind="pageCardConfig" v-model="formData"></WmcForm>
    </WmcCard>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref } from 'vue'
import WmcCard from '@/render/base-ui/card'
import WmcForm from '@/render/base-ui/form'

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    pageCardConfig: {
      type: Object,
      required: true
    },
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    WmcCard,
    WmcForm
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const formData = ref({ ...props.modelValue })
    watch(
      formData,
      (newValue) => {
        emit('update:modelValue', newValue)
      },
      {
        deep: true
      }
    )
    return { formData }
  }
})
</script>

<style scoped></style>
